<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Toggle - Sizes</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Toggle - Sizes</ion-title>
          <ion-buttons slot="end">
            <ion-button onClick="toggleDynamic()">Toggle</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding-horizontal">
        <h1>Default</h1>
        <ion-toggle legacy="true"></ion-toggle>
        <ion-toggle checked legacy="true"></ion-toggle>
        <ion-toggle color="danger" legacy="true"></ion-toggle>
        <ion-toggle color="danger" checked legacy="true"></ion-toggle>
        <ion-toggle color="tertiary" class="toggle-activated" legacy="true"></ion-toggle>
        <ion-toggle color="tertiary" checked class="toggle-activated" legacy="true"></ion-toggle>

        <h1>Custom Widths</h1>
        <ion-toggle color="secondary" class="width-small" legacy="true"></ion-toggle>
        <ion-toggle color="secondary" checked class="width-small" legacy="true"></ion-toggle>
        <ion-toggle color="secondary" class="width-large" legacy="true"></ion-toggle>
        <ion-toggle color="secondary" checked class="width-large" legacy="true"></ion-toggle>
        <ion-toggle color="tertiary" class="width-large toggle-activated" legacy="true"></ion-toggle>
        <ion-toggle color="tertiary" checked class="width-large toggle-activated" legacy="true"></ion-toggle>

        <h1>Custom Heights</h1>
        <div style="display: flex; flex-flow: column; float: left">
          <ion-toggle class="height-small" legacy="true"></ion-toggle>
          <ion-toggle checked class="height-small" legacy="true"></ion-toggle>
        </div>
        <ion-toggle class="height-large" legacy="true"></ion-toggle>
        <ion-toggle checked class="height-large" legacy="true"></ion-toggle>
        <ion-toggle class="handle-height-large" legacy="true"></ion-toggle>
        <ion-toggle checked class="handle-height-large" legacy="true"></ion-toggle>
        <ion-toggle checked class="handle-height-large toggle-activated" legacy="true"></ion-toggle>

        <h1>Dynamic Sizes</h1>
        <ion-toggle color="tertiary" class="dynamic-small width-small height-small" legacy="true"></ion-toggle>
        <ion-toggle color="tertiary" checked class="dynamic-small width-small height-small" legacy="true"></ion-toggle>
        <ion-toggle color="tertiary" class="dynamic-large width-large height-large" legacy="true"></ion-toggle>
        <ion-toggle color="tertiary" checked class="dynamic-large width-large height-large" legacy="true"></ion-toggle>

        <h1>Complex Custom Toggles</h1>
        <ion-toggle mode="ios" class="all-custom" legacy="true"></ion-toggle>
        <ion-toggle mode="ios" checked class="all-custom" legacy="true"></ion-toggle>

        <ion-toggle class="custom-overflow" legacy="true"></ion-toggle>
        <ion-toggle checked class="custom-overflow" legacy="true"></ion-toggle>

        <ion-toggle mode="ios" color="dark" class="custom-spacing" legacy="true"></ion-toggle>
        <ion-toggle mode="ios" color="dark" checked class="custom-spacing" legacy="true"></ion-toggle>

        <ion-toggle mode="md" color="dark" class="custom-spacing" legacy="true"></ion-toggle>
        <ion-toggle mode="md" color="dark" checked class="custom-spacing" legacy="true"></ion-toggle>

        <ion-toggle mode="ios" class="icon-custom" legacy="true"></ion-toggle>
        <ion-toggle mode="ios" checked class="icon-custom" legacy="true"></ion-toggle>
      </ion-content>
    </ion-app>

    <style>
      ion-toggle {
        padding: 5px;
      }

      .width-small {
        width: 40px;
      }

      .width-large {
        width: 100px;
      }

      .ios.height-small {
        height: 20px;

        /* The height of the handle is 100% of the track height - 4px */
        --handle-width: 16px;
      }

      .md.height-small {
        height: 10px;

        /* The height of the handle is 100% of the track height + 6px */
        --handle-width: 16px;
      }

      .height-large {
        height: 60px;

        --border-radius: 4px;
        --handle-border-radius: 4px;

        --handle-width: 50%;
      }

      .handle-height-large {
        height: 60px;

        /*
       * The max height of the handle is 100% of the track height - handle spacing
       * so this will never show as being 150%
       */
        --handle-height: 150%;
        --handle-width: 23px;
        --handle-border-radius: 14px 4px 4px 14px;
        --handle-transition: border-radius 120ms ease-in-out 80ms;
      }

      .handle-height-large.toggle-checked {
        --handle-border-radius: 4px 14px 14px 4px;
      }

      .icon-custom {
        --handle-background-checked: #fff url(/src/components/toggle/test/legacy/sizes/power-outline.svg) no-repeat
          center / contain;
      }

      .icon-custom::before {
        position: absolute;
        content: 'ON';
        color: white;
        top: 16px;
        left: 10px;
        z-index: 1;
        font-size: 8px;
      }

      .all-custom {
        height: 20px;
        width: 40px;

        --track-background: #fff;
        --track-background-checked: #0366a6;
        --handle-background: #bbbbbb;
        --handle-width: 20px;
        --handle-height: 20px;
        --handle-spacing: 0;
        --handle-box-shadow: none;

        border: 2px solid #bbb;
        border-radius: 16px;
      }

      .all-custom.toggle-checked {
        border-color: #0366a6;

        --handle-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1);
      }

      .custom-overflow {
        overflow: visible;

        contain: none;

        --track-background-checked: #d6ffd6;

        --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);
      }

      .ios.custom-spacing {
        --handle-height: 100%;
        --handle-width: 32px;

        --handle-spacing: 0;
      }

      .md.custom-spacing {
        --handle-height: 100%;
        --handle-width: 14px;

        --handle-spacing: 0;
      }
    </style>

    <script>
      const smallToggles = document.querySelectorAll('.dynamic-small');
      const largeToggles = document.querySelectorAll('.dynamic-large');

      function toggleDynamic() {
        for (var i = 0; i < smallToggles.length; i++) {
          const toggle = smallToggles[i];

          const hasClass = toggle.classList.contains('height-small');

          if (hasClass) {
            toggle.classList.remove('height-small');
            toggle.classList.remove('width-small');
          } else {
            toggle.classList.add('height-small');
            toggle.classList.add('width-small');
          }
        }

        for (var i = 0; i < largeToggles.length; i++) {
          const toggle = largeToggles[i];

          const hasClass = toggle.classList.contains('height-large');

          if (hasClass) {
            toggle.classList.remove('height-large');
            toggle.classList.remove('width-large');
          } else {
            toggle.classList.add('height-large');
            toggle.classList.add('width-large');
          }
        }
      }
    </script>
  </body>
</html>
